'use strict';
import React, {Component, PropTypes} from 'react';
import { connect } from 'react-redux';
import { Switch,Input,Form,Checkbox,Tabs,Row,Col} from 'antd';
import { setDialog }   from '../../../reducers/common/actions.js';
import { saveRow,_setRow }   from '../../../reducers/role/actions.js';
const FormItem = Form.Item;
const CheckboxGroup = Checkbox.Group;
const TabPane = Tabs.TabPane;
import PermissionItemBox  from './PermissionItemBox';

class PermissionBox extends Component {
    constructor(props) {
        super(props);
    }
    getCheckboxValue(t1,t2){
        let key = [t2,t1].join("|");
        return this.props.row.permission[key] ? true:false ;
    }
    onChangeCheckbox(t1,t2){
        let key = [t2,t1].join("|");
        let { row } = this.props;
        row = row.setIn(["permission",key], !row.permission[key]);
        //console.log(row.permission)
        this.props._setRow(row);
    }
    render() {
        if(!this.props.row.key) return null;

        return (
            <Tabs defaultActiveKey="1">
                {
                    this.props.row.permissionData.map((item,i)=>{
                        return (
                            <TabPane
                                tab={item.title}
                                key={i+1} >
                                {
                                    item.items.map((subItem,i)=>{
                                        return (
                                            <PermissionItemBox
                                                key={i}
                                                getCheckboxValue={this.getCheckboxValue.bind(this)}
                                                onChangeCheckbox={this.onChangeCheckbox.bind(this)}
                                                item={item}
                                                subItem={subItem} />
                                        )
                                    })
                                }
                            </TabPane>
                        )
                    })
                }

            </Tabs>
        )
    }
}

export default connect(
    state =>{
        return {
            row:state.role.row,
            confirmLoading:state.common.loading,
            dialog: state.common.dialog,
        };
    },
    dispatch => {
        return {
            setDialog:(key,value)=>dispatch(setDialog(key,value)),
            saveRow:(row,cb)=>dispatch(saveRow(row,cb)),
            _setRow:(row)=>dispatch(_setRow(row))
        }
    }
)(Form.create()(PermissionBox));